<template>
  <transition name="fade">
    <section
      class="youxue-mask component"
      :class="{'inner': inner, 'box box-center': center}"
      @touchmove.prevent
      @click.self="checkCanClose"
      v-if="value"
      >
      <div class="content text-center" :class="{'width': !center}">
        <!-- 内容 -->
        <slot name="content"></slot>

        <!-- 关闭按钮 -->
        <div class="close-btn" v-if="showClose">
          <van-image :src="$config.oss + '/icons/close_white_circle.png'" @click="closeMask"></van-image>
        </div>
      </div>
    <section>
  </transition>
</template>

<script>
export default {
  name: "youxueMask",

  model: {
    name: "value",
    event: "visible"
  },
  
  props: {
    value: {
      type: Boolean,
      default: false
    },

    inner: {
      type: Boolean,
      default: false
    },

    showClose: {
      type: Boolean,
      default: false
    },

    closeOnMask: {
      type: Boolean,
      default: true
    },

    center: {
      type: Boolean,
      default: true
    }
  },

  methods: {
    /**
     * 检查是否可以通过点击遮罩进行关闭
     */
    checkCanClose () {
      this.closeOnMask && this.closeMask();
    },

    /**
     * 关闭遮罩
     */
    closeMask () {
      this.$emit("visible", false);
    }
  },
}
</script>

<style lang="scss" scoped>
// touchmove.prevent 屏蔽滑动
.youxue-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $color-mask;
  z-index: 21;

  &.inner {
    position: absolute;
  }

  .content {
    width: 90%;
    max-width: 400px;
    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    .close-btn {
      display: inline-block;
      width: 25px;
      margin-top: 30px;
    }
  }
}
</style>